<template>
    <div class="index">
        <div class="header">
            <RouterView></RouterView>
        </div>
        <div class="footer">
            <van-tabbar v-model="active" active-color="#FF6A00" class="foots">
                <van-tabbar-item icon="home-o" to="/index/home">首页</van-tabbar-item>
                <van-tabbar-item icon="points" to="/index/classify">分类</van-tabbar-item>
                <van-tabbar-item icon="shopping-cart-o" to="/index/shopcart">购物车</van-tabbar-item>
                <van-tabbar-item icon="contact-o" to="/index/mine">我的</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script setup>
import { RouterView } from 'vue-router'
import { ref } from 'vue';
const active = ref(0);
</script>

<style lang="scss" scoped>
.index {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    .header {
        width: 375px;
        height: 748px;
        box-sizing: border-box;
    }
    .foots{
        box-sizing: border-box;
        width: 375px;
        height: 83px;
    }
}
</style>